<template>
  <div class="register">
    <div class="top">
      <div class="title">{{ hospitalStore.hospitalInfo.hospital?.hosname }}</div>
      <div class="level">
        <svg
          t="1714205933613"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5280"
          width="13"
          height="13"
        >
          <path
            d="M832 364.8h-147.2s19.2-64 32-179.2c6.4-57.6-38.4-115.2-102.4-121.6h-12.8c-51.2 0-83.2 32-102.4 76.8l-38.4 96c-32 64-57.6 102.4-76.8 115.2-25.6 12.8-121.6 12.8-128 12.8H128c-38.4 0-64 25.6-64 57.6v480c0 32 25.6 57.6 64 57.6h646.4c96 0 121.6-64 134.4-153.6l51.2-307.2c6.4-70.4-6.4-134.4-128-134.4z m-576 537.6H128V422.4h128v480z m640-409.6l-51.2 307.2c-12.8 57.6-12.8 102.4-76.8 102.4H320V422.4c44.8 0 70.4-6.4 89.6-19.2 32-12.8 64-64 108.8-147.2 25.6-64 38.4-96 44.8-102.4 6.4-19.2 19.2-32 44.8-32h6.4c32 0 44.8 32 44.8 51.2-12.8 102.4-32 166.4-32 166.4l-25.6 83.2h243.2c19.2 0 32 0 44.8 12.8 12.8 12.8 6.4 38.4 6.4 57.6z"
            p-id="5281"
            fill="#999999"
          />
        </svg>
        <span>{{ hospitalStore.hospitalInfo.hospital?.param.hostypeString }}</span>
      </div>
    </div>
    <!-- 展示内容区域 -->
    <div class="content">
      <div class="left">
        <img :src="`data:image/jpeg;base64,${hospitalStore.hospitalInfo.hospital?.logoData}`" />
      </div>
      <div class="right">
        <div>挂号规则</div>
        <div class="line">
          <div class="time">
            <span class="label">预约周期：</span>
            <span>10天</span>
          </div>
          <div class="space">
            <span class="label">放号时间：</span>
            <span>{{hospitalStore.hospitalInfo.bookingRule?.releaseTime}}</span>
          </div>
          <div class="space">
            <span class="label">停挂时间：</span>
            <span>{{hospitalStore.hospitalInfo.bookingRule?.stopTime}}</span>
          </div>
        </div>
        <div class="address">
          <span class="label">就诊地址：</span>
          <span>{{ hospitalStore.hospitalInfo.hospital?.param.fullAddress }}</span>
        </div>
        <div class="route">
          <span class="label">具体路线：</span>
          <span>{{ hospitalStore.hospitalInfo.hospital?.route }}</span>
        </div>
        <div class="releasetime">
          <span class="label">退号时间：</span>
          <span>就诊前一工作日{{hospitalStore.hospitalInfo.bookingRule?.quitTime}}前取消</span>
        </div>
        <div class="rule">
          <div class="title">预约挂号规则</div>
          <div
            class="ruleInfo"
            v-for="(item,index) in hospitalStore.hospitalInfo.bookingRule?.rule"
            :key="index"
          >{{ item }}</div>
        </div>
      </div>
    </div>
    <!-- 放置每一个医院的科室的数据 -->
    <div class="department_wrapper">
      <h1 class="title">选择科室</h1>
      <div class="department">
        <div class="leftNav">
          <ul>
            <li
              v-for="(department,index) in hospitalStore.departmentArr"
              :key="department.depcode"
              @click="changeActive(index)"
              :class="{active:currentIndex===index}"
            >{{ department.depname }}</li>
          </ul>
        </div>
        <div class="rightNav">
          <div
            class="showDepartment"
            v-for="(department) in hospitalStore.departmentArr"
            :key="department.depcode"
          >
            <h1 class="cur">{{ department.depname }}</h1>
            <ul v-show="department.children">
              <li @click="showLogin(item)" v-for="item in department.children" :key="item.depcode">{{item.depname}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// @ts-ignore
import { onMounted, ref } from "vue";
// @ts-ignore
import useDetailStore from "@/store/modules/hospitalDetail";
import {useRouter,useRoute} from "vue-router";
let router=useRouter();
let route=useRoute();
let hospitalStore = useDetailStore();
// 控制科室高亮的响应式数据
let currentIndex = ref<number>(0);
const changeActive = (index: number) => {
  currentIndex.value = index;
  let allH1 = document.querySelectorAll(".cur");
  allH1[index].scrollIntoView({behavior:"smooth"});
};
const showLogin=(item:any)=>{
  router.push({path:'/hospital/register_step1',query:{hoscode:route.query.hoscode,depcode:item.depcode}})
}
</script>

<style lang="scss" scoped>
.register {
  margin-top: 38px;
  .top {
    display: flex;
    align-items: center;
    cursor: pointer;
    .title {
      color: #333;
      font-size: 20px;
      font-weight: 700;
      margin-right: 15px;
      letter-spacing: 1px;
    }
    .level {
      display: flex;
      align-items: center;
      color: #999;
      font-size: 13px;
      letter-spacing: 1px;
      span {
        padding-left: 3px;
      }
    }
  }
  .content {
    display: flex;
    margin-top: 50px;
    .left {
      width: 80px;
      img {
        width: 80px;
        height: 80px;
        border-radius: 40px;
      }
    }
    .right {
      flex: 1;
      color: #333;
      margin-left: 30px;
      cursor: pointer;
      .line {
        display: flex;
        margin-top: 15px;
        font-size: 12px;
        .space {
          margin-left: 60px;
        }
        .label {
          color: #999;
        }
      }
      .address,
      .route,
      .releasetime {
        font-size: 12px;
        margin-top: 8px;
        span {
          line-height: 20px;
        }
        .label {
          color: #999;
        }
      }
      .rule {
        margin-top: 20px;
        .title {
          margin-bottom: 15px;
        }
        .ruleInfo {
          font-size: 12px;
          color: #999;
          line-height: 20px;
        }
      }
    }
  }
  .department_wrapper {
    cursor: pointer;
    margin-top: 40px;
    .title {
      font-weight: 700;
      font-size: 16px;
      color: #333;
      letter-spacing: 1px;
      margin-bottom: 20px;
    }
    .department {
      display: flex;
      .leftNav {
        width: 170px;
        margin-right: 50px;
        text-align: center;
        padding: 12px 0;
        background-color: #f4f9ff;
        ul {
          li {
            padding: 10px 0;
            color: #333;
            font-size: 14px;
            transition: all 0.2s;
            &.active {
              font-weight: 700;
              font-size: 16px;
              background-color: #fff;
            }
          }
        }
      }
      .rightNav {
        flex: 1;
        height: 445px;
        overflow: auto;
        &::-webkit-scrollbar {
          display: none;
        }
        .showDepartment {
          margin-bottom: 20px;
          padding: 20px 30px 20px;

          &:first-child {
            background-color: #fafafa;
          }
          h1 {
            display: flex;
            font-size: 14px;
            font-weight: 700;
            color: #333;
            &::before {
              display: inline-block;
              content: "";
              width: 4px;
              height: 14px;
              background: #4990f1;
              margin-right: 6px;
            }
          }
          ul {
            display: flex;
            flex-wrap: wrap;
            margin-top: 20px;
            color: #666;
            letter-spacing: 1px;
            font-size: 14px;
            li {
              width: 225px;
              margin-top: 10px;
              padding-right: 28px;
              &:hover {
                color: #4990f1;
              }
            }
          }
        }
      }
    }
  }
}
</style>
